<template>
  <div class="result-wrapper">
    <div class="song" v-for="(item, index) in musicList" :key="'song'+index">
      <div class="name">
        <span class="iconfont icon-play" @click="toPlay(item)"></span>
        <a href="javascript:void(0)" @click="toComment(item.id)">{{item.name}}</a>
        <span class="iconfont icon-editmedia" v-if="item.mvid!=0" @click="toMv(item.mvid)"></span>
      </div>
      <div class="singer">{{item.artists | formatSinger}}</div>
      <div class="album">《{{item.album.name}}》</div>
      <!-- 持续时间 -->
      <div class="time">{{item.duration | formatTime}}</div>
    </div>
  </div>
</template>

<script>
  import songList from '../mockdatas/songList'

  export default {
    data() {
      return {
        musicList: [],
      }
    },
    created() {
      this.getSongList();
    },

    // 用 watch 同样具备监听数据变化，从而触发 getSongList 方法的效果
    // watch: {
    //   '$route.params.search': function () {
    //     this.getSongList()
    //   },
    // },

    // 使用局部路由首位 监听传入的路由参数，此时因为路由中的 this.$route.params.search 发生了变化，就触发 getSongList 方法获取歌曲名。
    beforeRouteUpdate(to, from, next) {
      // console.log(this) // 可以访问this
      // console.log('beforeRouteUpdate')
      next()
      this.getSongList()
    },


    methods: {
      async getSongList() {
        // 获取数据
        // console.log(this.$route.params.search)
        let keyword = this.$route.params.search ? this.$route.params.search : window.localStorage.getItem("keyword")
        console.log(keyword)
        if (!keyword) {
          alert("未输入搜索关键字，请检查输入！")
          return
        }

        // axios接口调用
        // 已经在 mian.js 中全局导入路由，就不需要在需要它的组件中导入使用，使用方法也会发生相应的改变
        // axios
        //   .get(
        //     `/search?keywords=${keyword}`
        //   )
        //   .then(backData => {
        //     console.log(backData)
        //     // 保存歌曲列表
        //     // this.musicList = backData.data.result.songs;
        //   });

        // 请求真实数据
        let backData = await this.$axios.get(`/search?keywords=${keyword}`);
        console.log(backData);
        this.musicList = backData.data.result.songs;

        // 将假数据直接获取渲染到页面上
        // this.musicList = songList;

      },
      toPlay(item) {
        window.localStorage.setItem("song", JSON.stringify(item))
        // 代码跳转
        // router.push(`/player/${item.id}`);
        this.$router.push("/player/" + item.id)
      },
      // 去看mv
      toMv(mvid) {
        // router.push(`/video/${mvid}`);
        this.$router.push("/video/" + mvid)
      },
      // 去看评论
      toComment(id) {
        this.$router.push("/comment/" + id)
      },
    },
    // 过滤器
    filters: {
      // 处理格式
      formatSinger(singers) {
        // console.log(singers)
        // 空字符串拼接
        let temStr = '';
        // 获取所有的歌手
        for (let i = 0; i < singers.length; i++) {
          // 拼接歌手
          temStr += singers[i].name;
          // 拼接分隔符
          temStr += '/';
        }
        // 移除最后一个/
        // 0从0开始
        // -1 到倒数第二个 （-1 ,从后往前来算）
        temStr = temStr.slice(0, -1);

        // return'牛逼的歌手'
        // 返回拼接的数据
        return temStr;
      },
      // 处理时间
      formatTime(time) {
        //console.log(time);
        // 毫秒->秒
        const totalSec = time / 1000;
        // 秒->分 小数部分舍去
        const min = Math.floor(totalSec / 60);
        // 剩余的部分是 秒 不满足分的部分 全部到秒
        let sec = Math.floor(totalSec % 60);
        // 秒不够2位 补足2位
        sec = sec < 10 ? '0' + sec : sec;
        return min + ':' + sec;
      },
    },
  }
</script>

<style scoped>
  @import "@/assets/css/results.css";
</style>